{% extends "base.html" %}
{% block title %}创建任务{% endblock %}
{% block navbar %}{{ super() }}{% endblock %}
{% block styles %}{{ super() }}
<style>
    .main-div {
        background: #ffffff none repeat scroll 0 0;
        border-radius: 2px;
        margin: 10px auto 30px;
        max-width: 80%;
        padding: 20px 20px 20px 20px;
    }

    body {
        padding-top: 100px;
    }
</style>
{% endblock %}
{% block scripts %}{{ super() }}
<script>
    $(function () {
        var subcategories;
        subcategories = $('#subcategory').html();
        $('#subcategory').empty();
        return $('#category').change(function () {
            var category, options;
            category = $('#category :selected').html();
            options = $(subcategories).filter("optgroup[label='" + category + "']").html();
            if (options) {
                return $('#subcategory').html(options);
            } else {
                return $('#subcategory').empty();
            }
        });
    });
    $(function () {
        $('.datepicker').datepicker({
            format: 'mm/dd/yyyy',
            startDate: '-3d',
            todayBtn: true,
            todayHighlight: true
        });
    });
</script>
{% endblock %}
{% block content %}
<div class="container">
    <div class="row">
        <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>
        <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
            {% include 'flash_message.html' %}
            <form action="{{ url_for('bp_user.task_create') }}" method="POST">
                <div class="form-group">
                    <label for="jobnumberid">工作令号</label>
                    <select class="selectpicker form-control" name="jobnumberid" title="选择工作令号" data-show-subtext="true"
                        data-live-search="true">
                        {% for jobnumber in jobnumbers %}
                        <option value="{{ jobnumber[0] }}">{{ jobnumber[1] }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group">
                    <label for="categoryid">大类</label>
                    <select id="category" class="form-control" name="categoryid" title="选择大类">
                        <option disabled selected value> -- 请选择大类 -- </option>
                        {% for category in categories %}
                        <option value="{{ category[0] }}">{{ category[1] }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group">
                    <label for="subcategoryid">分类</label>
                    <select id="subcategory" class="form-control" name="subcategoryid" title="选择分类">
                        {#
                        {% for subcategory in subcategories %}
                        <option value="{{ subcategory[0] }}" data-option="{{ subcategory[2] }}">{{ subcategory[1] }}</option>
                        {% endfor %}
                        #}
                        {% for opg,subs in optgroup.items()  %}
                        <optgroup label="{{ opg }}">
                            {% for sub in subs %}
                            <option value={{ sub[0] }}> {{ sub[1] }} </option>
                            {% endfor %}
                        </optgroup>
                        {% endfor %}

                    </select>
                </div>
                <div class="form-group">
                    <label for="tasktime">日期</label>
                    <input type="text" name="tasktime" class="datepicker form-control">
                </div>
                <div class="form-group">
                    <label for="manhour">工时</label>
                    <input type="text" name="manhour" class="form-control" pattern="^[0-9]+\.{0,1}[0-9]{0,5}$"
                        title="数字">
                </div>
                <div class="form-group">
                    <label for="title">任务</label>
                    <input type="text" name="title" class="form-control">
                </div>
                <div class="form-group">
                    <label for="remark">任务备注</label>
                    <textarea name="remark" class="form-control"></textarea>
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
            </form>
        </div>
        <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>
    </div>
</div>
{% endblock %}